<style>
    *{
        margin: 0;
        padding: 0;
    }
    .div1,.div2{
        width: 200px;
        height: 800px;
    }
    .div1{
        background-color: pink;
    }
    .div2{
        background-color: #396bb3;
    }
    .return_top{
        position:fixed;
        right: 20px;
        bottom: 30px;
        height: 30px;
        width: 60px;
        color: white;
        text-align: center;
        line-height: 30px;
        background-color: darkgrey;

    }
    .hide{
    display: none;
    }

</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Juery css</title>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<button class="return_top hide" onclick="return_top()">返回顶部</button>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    window.onscroll=  function () {

        if($(window).scrollTop()>100){
            $(".return_top").removeClass('hide');

        }else {
            $(".return_top").addClass('hide');
        }
    };
    function return_top() {
        $(window).scrollTop(0);
    }
</script>
</body>
</html>